<!DOCTYPE HTML>
<html>
<head>
    {include file="layout:_meta" /}
    <title>职位模块</title>
</head>
<body>
<nav class="breadcrumb">




    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="Hui-iconfont">&#xe68f;</i>
    </a>
</nav>
<div id="table" class="page-container">
    <div class="text-c">
        <span class="select-box" style="width:150px">
			<select class="select" name="brandclass" size="1"  v-model="search.status" >
				<option value="" selected="">
                    <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">状态</font></font></option>
                    <option value="pending"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">申请中</font></font></option>
                    <option value="success"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">打款成功</font></font></option>
                    <option value="failed"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">打款失败</font></font></option>
			</select>
		</span>
        <span class="select-box" style="width:150px">
			<select class="select" name="brandclass" size="1"  v-model="search.type" >
                		<option value="" selected="selected">
                    <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">提现类型</font></font></option>
                    <option value="bank" ><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">银行卡</font></font></option>
                    <option value="alipay"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">支付宝</font></font></option>
			</select>
		</span>
        <input type="text" class="input-text"   id="search_time" v-model="search.datetime"class="input-text Wdate"  placeholder="时间" style="width:300px;">
        <input type="text" class="input-text"  v-model="search.searchval" style="width:250px" placeholder="姓名/账号/卡号/开户行">
        <button type="submit" v-on:click="btnSearch()" class="btn btn-success" name=""><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
    </div>

    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <a href="javascript:;" v-on:click="adminpassAll()" class="btn btn-primary radius">
            <i class="Hui-iconfont"></i>
            批量打款成功
        </a>
        <span class="r">共有数据：<strong>{{count}}</strong> 条</span></div>
    <table class="table table-border table-bordered table-bg">
        <thead>
        <tr class="text-c">
            <th width="25"><input type="checkbox" @click="selectAll"></th>
            <th width="40">编号</th>
            <th width="150">姓名</th>
            <th width="150">提现类型</th>
            <th width="150">提现金额</th>
            <th width="150">支付宝账号</th>
            <th width="150">银行卡账号</th>
            <th width="150">银行卡开户行</th>
            <th width="150">银行卡开户行地址</th>
            <th width="150">创建时间</th>
            <th width="150">审核状态</th>
            <th width="100">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr class="text-c" v-for="(item,index)  in lists">
            <td><input type="checkbox" :value="index" v-model="selectArr"></td>
            <td>{{item.id}}</td>
            <td>{{item.real_name}} </td>
            <td><span v-text="type(item.type)">  </span></td>
            <td> {{item.amount}} </td>
            <td> {{item.ali_account}} </td>
            <td>{{item.bank_cardid}}</td>
            <td>{{item.bank_name}} </td>
            <td>{{item.bank_open_address}} </td>
            <td> {{item.create_time}}  </td>
            <td>
                <span v-text="getStatusText(item.status,item)"></span>
            </td>
            <td class="f-14 product-brand-manage">
                <a class="btn  btn-primary" v-show="statusButn(item.status)" v-bind:data-id="item.id" v-on:click="successCase($event,item.id,index)"  href="javascript:;" title="成功">
                    成功</a>
                <a class="btn btn-warning"  v-show="statusButn(item.status)"  class="ml-5" v-on:click="failedCase(this,item.id,index)" href="javascript:;" title="失败">
                    失败退回
                </a>
            </td>
        </tr>
        </tbody>
    </table>
    <!--vueJS分页---start-->
    <div class="pagination">
        <ul>
            <li v-if="current>1"><a v-on:click="current--,pageClick()">上一页</a></li>
            <li v-if="current==1"><a class="banclick">上一页</a></li>
            <li v-for="index in indexs"  v-bind:class="{ 'active': current == index}">
                <a v-on:click="btnClick(index)">{{ index }}</a>
            </li>
            <li v-if="current!=total"><a v-on:click="current++,pageClick()">下一页</a></li>
            <li v-if="current == total"><a class="banclick">下一页</a></li>
            <li><a>共<i>{{total}}</i>页</a></li>
        </ul>
    </div>
    <!--vueJS分页---end-->
</div>
<!--_footer 作为公共模版分离出去-->
{include file="layout:_footer" /}
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->

<!--<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>-->
<script type="text/javascript">

    var app_model = new Vue({
        el: "#table",
        data: {
            selectArr:[],
            count:0,
            lists: [],//表格数据
            total:1, //总页数
            current:1,  //当前页码
            search:{
                type:'',
                status:'',
            {if $user }
            user_id: {$user['id']}
            {/if}
            }
        },
       mounted: function () {
           var ss =  laydate.render({
                elem: '#search_time', //指定元素
                type:'datetime',
                range:true,
                done: value => { // 点击确认执行的回调函数，会把当前选择的时间传入进来
                    // 把选择的时间赋值给先前定义好的变量，显示在页面
                    this.search.datetime = value;
                }
            });
        },
        methods: {
            failedCase(e,id,Dataindex){

                layer.open({
                    type:1,
                    title:'信息',
                    area: ['400', '300'],
                    content:" <div class='' style='padding: 20px;'>失败原因：<textarea class='form-group' id='remark' type='text' cols='30' rows='3'></textarea></div>",
                    btn: ['确定'],
                    yes: function (index, layero) {
                        var remark = $('#remark').val();
                        $.ajax({type:'post',url:'/admin/withdrawalcash/pass',
                         data:{
                             id:id,
                            remark,
                             status:'failed',
                         },
                            success:function (data) {
                                if(data.status==true){
                                    app_model.lists[Dataindex].status = data.data.status;
                                    app_model.lists[Dataindex].admin_remark = data.data.admin_remark;
                                }
                                layer.msg(data.message,{icon:1,time:1000});
                                // index = parent.layer.getFrameIndex(window.name); //获取窗口索引;
                                layer.closeAll();
                            }
                        });

                    }
                });
            },
            successCase(e,id,Dataindex){

                layer.open({
                    type:1,
                    title:'信息',
                    area: ['30%', '20%'],
                    content:"<span style='padding: 15px;'>确认打款成功吗？</span>",
                    btn: ['确定'],
                    yes: function (index, layero) {

                        var remark = $('#remark').val();
                        $.ajax({type:'post',url:'/admin/withdrawalcash/pass',
                            data:{
                                id:id,
                                remark:remark,
                                status:'success',
                            },
                            success:function (data) {
                                if(data.status==true){
                                    app_model.lists[Dataindex].status = data.data.status;
                                }
                                layer.msg(data.message,{icon:1,time:1000});
                                // index = parent.layer.getFrameIndex(window.name); //获取窗口索引;
                                layer.closeAll();
                            }
                        });

                    }
                });
            },
           statusButn(status){
                switch (status) {
                    case 'pending':
                        return true;
                    break;
                    case "success":
                        return false;
                        break;

                    case 'failed':
                        return false;
                        break
                    default:
                        return true;
                        break;
                }
            },
            type(val){
                return val == 'alipay' ?'支付宝':'银行卡';
            }   ,
            getStatusText($status,item){
                switch ($status) {
                    case 'pending':
                        return '申请中';
                    break;
                    case 'success':
                        return '成功';
                    break;
                    case 'failed':
                        return '失败（原因:'+item.admin_remark+'）';
                    break;
                }
            },

            //全选
            selectAll(event) {
                var _this = this;
                console.log(event.currentTarget.checked)
                if (!event.currentTarget.checked) {
                    _this.selectArr = [];
                } else { //实现全选
                    _this.selectArr = [];
                    _this.lists.forEach(function(item, i) {
                        _this.selectArr.push(i);
                    });
                }
            },
            adminpassAll(){
                $data =  this.selectArr;
                console.log(this.selectArr);
                var  ids = $data

                if(ids.length){
                    $.ajax({
                        url:'/admin/withdrawalcash/passAll',
                        type:'post',
                        data:{
                            ids:JSON.stringify(ids) ,
                        },
                        success:function(){
                        window.location.reload();
                    }

                    })
                } else {
                 layer.msg('请选择需要更新的数据')
                }
            },
            //部分删除
            datadel:function (ele,delid,index) {
                var len = this.lists.length;
                var ids = [];
                var arridx = [];
                if (delid) {
                    ids.push(delid);
                    arridx.push(index);
                }
                // for (var i = 0; i < len; i++) {
                //     if (this.selectArr[i]>=0) {
                //         let idx = this.selectArr[i];
                //         arridx.push(idx);
                //         ids.push(this.lists[idx].id);
                //     }
                // }

                admin_alldel("{:url('withdrawalcash/remove')}", this, JSON.stringify(ids), arridx);
                this.selectArr = [];
            },
            //上一页,下一页翻页
            pageClick: function(){
                var url = "{:url('withdrawalcash/index')}" {if $user } + '?user_id ='+"{$user['id']}" {/if};
                    initTable(url,this.current,this.search);
                },

                //点击页码
                btnClick: function(data){
                    if(data != this.current){
                        this.current = data;
                        var url = "{:url('withdrawalcash/index')}" {if $user } + '?user_id ='+"{$user['id']}" {/if};
                            initTable(url,this.current,this.search);
                        }
                    },
                    //搜索框搜索
                    btnSearch:function () {
                        initTable("{:url('withdrawalcash/index')}",this.current,this.search);
                    },
                    // 身份
                    Status: function($status){
                        $content = '未知 ';
                        switch ($status) {
                            case  0:
                                $content = '审核中'; // 0 1正常
                                break;
                            case 1 :
                                $content = '正常';
                                break;
                        }
                        return $content;
                    },

                    //用户详情
                    showinfo:function(event,$userid){
                        console.log($userid);
                    },
                    gettime:function (nS) {
                        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
                    },
                    // 通过 审核
                    userpass:function (event,id,index) {
                        console.log(index);
                        layer.confirm('确认要审核通过吗？',function(){
                            util.post("{:url('withdrawalcash/pass')}",{id:id},function (data) {
                                if(data.status==true){
                                    app_model.lists[index].status = 1;
                                }
                                layer.msg(data.message,{icon:1,time:1000});
                            });
                        });
                    },

                },

                //分页
                computed: {
                    indexs: function () {
                        var left = 1;
                        var right = this.total;
                        var ar = [];
                        if (this.total >= 5) {
                            if (this.current > 3 && this.current < this.total - 2) {
                                left = this.current - 2;
                                right =left + 4;
                            } else {
                                if (this.current <= 3) {
                                    left = 1;
                                    right = 5;
                                } else {
                                    right = this.total;
                                    left = this.total - 4;
                                }
                            }
                        }
                        while (left <= right) {
                            ar.push(left);
                            left++;
                        }
                        return ar
                    }
                },
                mounted:{
                    // 渲染完成后的操作；v
                }
            });

    //初始化数据表格
    var url = "{:url('withdrawalcash/index')}" {if $user } + '?user_id ='+"{$user['id']}" {/if};
        initTable(url, {$pageno});



        laydate.render({
            elem: '#search_time', //指定元素
            type:'datetime',
            range:true,
            done: value => { // 点击确认执行的回调函数，会把当前选择的时间传入进来
                // 把选择的时间赋值给先前定义好的变量，显示在页面

                console.log(  app_model.$data);
                app_model.$data.search.create_time = value;
            }
        });
</script>
</body>
</html>
